import React from 'react';
import Elec from "../components/elec/elec";
import Vib from "../components/vib/vib";
import Tc from "../components/tc/tc";
import Tem from "../components/tem/tem";
import Pres from "../components/pres/pres";
import Lifter from "../components/lifter";
import Fault from "../components/fault/fault";
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import moduleNavImg from "../imgs/ksh33.png";
import conBot_1 from "../imgs/ksh42.png";
import conBot_2 from "../imgs/ksh43.png";
import conBot_4 from "../imgs/ksh44.png";
import conBot_3 from "../imgs/ksh45.png";

class Curve extends React.Component {
    render() {
        return (
            <div className="my-lay-all curve-main">
                <div className="elec-m my-module">
                    <nav>
                        <Link to="/elecPage" className="curve-link">主副井电度</Link>
                        <img src={moduleNavImg} className="module-nav-img" alt=""></img>
                    </nav>
                    <div>
                        <Elec className="module-nav-img" className="my-lay-all"/>
                    </div>
                </div>
                <div className="tc-m my-module" >
                    <nav>
                        <Link to="/tcPage" className="curve-link">主副井勾数</Link>
                        <img src={moduleNavImg} className="module-nav-img" alt=""></img>
                    </nav>
                    <div>
                        <Tc className="module-nav-img" className="my-lay-all"/>
                    </div>
                </div>
                <div className="vib-m-m my-module">
                    <nav>
                        {/* true: 主井   false: 副井 */}
                        <Link to={{pathname:"/vibPage",state:{flag:true}}} className="curve-link">主井振动</Link>
                        <img src={moduleNavImg} className="module-nav-img" alt=""></img>
                    </nav>
                    <div>
                        <Vib className="my-lay-all" flag={true}/>
                    </div>
                </div>
                <div className="vib-s-m my-module">
                    <nav>
                        <Link to={{pathname:"/vibPage",state:{flag:false}}} className="curve-link">副井振动</Link>
                        <img src={moduleNavImg} className="module-nav-img" alt=""></img>
                    </nav>
                    <div>
                        <Vib className="my-lay-all" flag={false}/>
                    </div>
                </div>
                <div className="tem-m-m my-module">
                    <nav>
                        {/* true: 主井   false: 副井 */}
                        <Link to={{pathname:"/temPage",state:{flag:true}}} className="curve-link">主井温度</Link>
                        <img src={moduleNavImg} className="module-nav-img" alt=""></img>
                    </nav>
                    <div>
                        <Tem className="my-lay-all" flag={true}/>
                    </div>
                </div>
                <div className="tem-s-m my-module">
                    <nav>
                        <Link to={{pathname:"/temPage",state:{flag:false}}} className="curve-link">副井温度</Link>
                        <img src={moduleNavImg} className="module-nav-img" alt=""></img>
                    </nav>
                    <div>
                        <Tem className="my-lay-all" flag={false}/>
                    </div>
                </div>
                <div className="pres-m my-module">
                    <nav>
                        <Link to="/presPage" className="curve-link">液压站压力</Link>
                        <img src={moduleNavImg} className="module-nav-img" alt=""></img>
                    </nav>
                    <div>
                        <Pres className="my-lay-all"/>
                    </div>
                </div>               
                <div className="lifter-m">
                    <img src={conBot_1} alt="" className="conbot-1"/>
                    <img src={conBot_2} alt="" className="conbot-2"/>
                    <img src={conBot_3} alt="" className="conbot-3"/>
                    <img src={conBot_4} alt="" className="conbot-4"/>
                    <Lifter className="my-lay-all"/>
                </div>                           
                <div className="fault-m my-module">
                    <nav>
                        <Link to="/faultPage" className="curve-link">故障信息</Link>
                        <img src={moduleNavImg} className="module-nav-img" alt=""></img>
                    </nav>
                    <div>
                        <Fault className="my-lay-all fault-table"/>
                    </div>
                </div>
            </div>
        );
    }
}
export default Curve;